<template>
  <div class="page-box">
    <div :class="{'searchCom-top':!$store.state.isDDMobilePlatform}" style="width:100%;height:auto;position:fixed;left:0px;top:0px;z-index:99999">
      <searchCom @searchCallBack="searchCallBack" class="maxWidth" :placeholder="'请输入提交人姓名'" ref="search" />
    </div>
    <div class="page-top-nav maxWidth">
      <van-tabs @change="changeTabs()" class="nf-tabs-box" :class="{'van-sticky-pc':!$store.state.isDDMobilePlatform}" animated swipeable title-active-color="#1989fa" color="#1989fa" v-model="active">
        <van-tab style="paddingTop:146px" title="评分">
          <div style="padding:0px" v-if="!scoreApproval_listDoneData.length" class="item cursor cenCen">
            暂无数据
          </div>
          <div @click="scoreDetile(item)" v-for="(item,index) of scoreApproval_listDoneData" :key="index" class="item cursor">
            <van-tag class="item-state" :class="approve_status[item.approve_status||0].state" plain>{{approve_status[item.approve_status||0].lable}}</van-tag>
            <div class="item-logo-box topCen">
              <div v-if="!item.portrait" class="item-logo cenCen">
                {{subNameLast(item.user_name)}}
              </div>
              <div v-else class="item-logo cenCen">
                <img :src="item.portrait">
              </div>
            </div>
            <div class="item-con-box">
              <div class="item-con-user-name fonsSizeTitle">{{item.user_name}} 自评{{item.me_score||0}}分 {{gradeInit(item.me_score).gradeadd}}</div>
              <div class=" fonsSizeCon">部门：{{item.dept_list}}</div>
              <div class=" fonsSizeCon">提交时间：{{item.create_time}}</div>
              <div v-if="item.end_score" class=" fonsSizeCon">最终得分：{{item.end_score||0}}分 {{gradeInit(item.end_score).gradeadd}}</div>
            </div>
          </div>
        </van-tab>
        <van-tab style="paddingTop:146px" title="考核指标">
          <div style="padding:0px" v-if="!exmApproval_listPendingData.length" class="item cursor cenCen">
            暂无数据
          </div>
          <div @click="assessmentDetile(item)" v-for="(item,index) of exmApproval_listPendingData" :key="index" class="item cursor">
            <van-tag class="item-state" :class="state[item.status||0].state" plain>{{state[item.status||0].lable}}</van-tag>
            <div class="item-logo-box topCen">
              <div v-if="!item.portrait" class="item-logo cenCen">
                {{subNameLast(item.user_name)}}
              </div>
              <div v-else class="item-logo cenCen">
                <img :src="item.portrait">
              </div>
            </div>
            <div class="item-con-box">
              <div class="item-con-user-name fonsSizeTitle">{{item.user_name}}</div>
              <div class=" fonsSizeConTitle">{{item.quarter_name}}</div>
              <div class=" fonsSizeCon">部门：{{item.dept_list}}</div>
              <div class=" fonsSizeCon">提交时间：{{item.create_time}}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div :class="{'van-dropdown-menu-box-pc':!$store.state.isDDMobilePlatform}" class="van-dropdown-menu-box">
      <van-dropdown-menu v-if="active==0" class="maxWidth">
        <!-- <van-dropdown-item title="提交人" class="maxWidth" v-model="depts" :options="deptsList">
          <van-search v-model.trim="scoreApproval_userName" placeholder="请输入提交人姓名" show-action :clearable="false" shape="square">
            <div @click="scoreApproval_listByName()" style="cursor: pointer;" slot="action">搜索</div>
          </van-search>
        </van-dropdown-item> -->
        <van-dropdown-item :title="`状态${approve_statusText}`" class="maxWidth" v-model="approve_statusSelect" :options="approve_statusList" />
      </van-dropdown-menu>
      <van-dropdown-menu v-if="active==1" class="maxWidth">
        <!-- <van-dropdown-item title="提交人" class="maxWidth" v-model="depts" :options="deptsList">
          <van-search v-model.trim="exmApproval_userName" placeholder="请输入提交人姓名" show-action :clearable="false" shape="square">
            <div @click="exmApproval_listByName()" style="cursor: pointer;" slot="action">搜索</div>
          </van-search>
        </van-dropdown-item> -->
        <van-dropdown-item :title="`状态${statusText}`" class="maxWidth" v-model="status" :options="statusList" />
      </van-dropdown-menu>
    </div>
  </div>
</template>

<script>
import searchCom from "@/components/search/index.vue"; //搜索组件
import service from "@/api";
import state from "@/components/js/state"; //考核状态
import approve_status from "@/components/js/approve_status"; //评分状态
import { grade } from "@/components/js/grade.js"; //分数等级
export default {
  components: { searchCom },
  data() {
    return {
      exmApproval_userName: "", //考核提交人
      scoreApproval_userName: "", //评分提交人
      active: 0,
      deptsList: [],
      depts: "",
      statusList: [], //考核状态选项
      status: "3", //选中的考核状态选项
      approve_statusList: [], //评分状态选项
      approve_statusSelect: "3", ///选中的评分状态选项
      // 评分板块
      scoreApproval_listDoneData: [],
      scoreApproval_listDoneDataSave: [],
      // 考核指标板块
      state: state, //考核状态
      approve_status: approve_status, //评分状态
      exmApproval_listPendingData: [],
      exmApproval_listPendingDataSave: []
    };
  },
  computed: {
    approve_statusText() {
      if (this.approve_statusSelect === "") {
        return "";
      }
      let value = "";
      this.approve_statusList.map(item => {
        if (item.value == this.approve_statusSelect) {
          value = item.text;
        }
      });
      return `(${value})`;
    },
    statusText() {
      if (this.status === "") {
        return "";
      }
      let value = "";
      this.statusList.map(item => {
        if (item.value == this.status) {
          value = item.text;
        }
      });
      return `(${value})`;
    }
  },
  watch: {
    status(val) {
      this.exmApproval_listPending();
      // if (val === "") {
      //   this.exmApproval_listPendingData = this.exmApproval_listPendingDataSave;
      //   return;
      // }
      // this.exmApproval_listPendingData = [];
      // for (
      //   let index = 0;
      //   index < this.exmApproval_listPendingDataSave.length;
      //   index++
      // ) {
      //   const element = this.exmApproval_listPendingDataSave[index];
      //   if (!this.exmApproval_listPendingDataSave[index].status) {
      //     this.exmApproval_listPendingDataSave[index].status = 0;
      //   }
      //   if (this.exmApproval_listPendingDataSave[index].status == val) {
      //     this.exmApproval_listPendingData.push(element);
      //   }
      // }
    },
    approve_statusSelect(val) {
      this.scoreApproval_listDone();
      // if (val === "") {
      //   this.scoreApproval_listDoneData = this.scoreApproval_listDoneDataSave;
      //   return;
      // }
      // this.scoreApproval_listDoneData = [];
      // for (
      //   let index = 0;
      //   index < this.scoreApproval_listDoneDataSave.length;
      //   index++
      // ) {
      //   const element = this.scoreApproval_listDoneDataSave[index];
      //   if (!this.scoreApproval_listDoneDataSave[index].approve_status) {
      //     this.scoreApproval_listDoneDataSave[index].approve_status = 0;
      //   }
      //   if (this.scoreApproval_listDoneDataSave[index].approve_status == val) {
      //     this.scoreApproval_listDoneData.push(element);
      //   }
      // }
    }
  },
  created() {
    // 初始化考核状态
    this.statusList = [];
    const stateKey = Object.keys(state);
    stateKey.map(item => {
      if (item != 10) {
        // 木有撤销的
        this.statusList.push({
          text: state[item].lable,
          value: item
        });
      }
    });
    this.statusList.push({
      text: "全部",
      value: "3"
    });

    // 初始化评分状态
    this.approve_statusList = [
      {
        text: "待审核",
        value: "0"
      },
      {
        text: "已通过",
        value: "1"
      },
      {
        text: "已拒绝",
        value: "2"
      }
    ];
    // const approve_statusListKey = Object.keys(approve_status);
    // approve_statusListKey.map(item => {
    //   this.approve_statusList.push({
    //     text: approve_status[item].lable,
    //     value: item
    //   });
    // });

    this.approve_statusList.push({
      text: "全部",
      value: "3"
    });

    this.initFun();
  },
  methods: {
    changeTabs() {
      this.$refs.search.searchValue = "";
    },
    async initFun() {
      this.exmApproval_listPending();
      this.scoreApproval_listDone();
    },
    async exmApproval_listByName() {
      this.$store.state.loading = true;
      this.$store.state.loadingText = "获取数据中";
      const { data = [] } = await service.exmApproval_listByName({
        start: 0,
        limit: 999999,
        // status: this.status,
        userName: this.exmApproval_userName,
        current: 1
      });
      this.$store.state.loading = false;
      console.log("考核指标板块", data);
      this.exmApproval_listPendingData = data.rows || [];
    },
    // 考核指标板块
    // 分页查询待我审核的数据
    async exmApproval_listPending() {
      this.exmApproval_userName = "";
      this.$store.state.loading = true;
      this.$store.state.loadingText = "获取数据中";
      const { data = [] } = await service.exmApproval_listPending({
        start: 0,
        limit: 999999,
        status: this.status,
        userName: this.exmApproval_userName,
        current: 1
      });
      this.$store.state.loading = false;
      console.log("考核指标板块", data);
      this.exmApproval_listPendingData = data.rows || [];
      this.exmApproval_listPendingDataSave = data.rows || [];
    },
    searchCallBack(val) {
      if (this.active == 0) {
        this.scoreApproval_userName = val;
        this.scoreApproval_listByName();
      } else {
        this.exmApproval_userName = val;
        this.exmApproval_listByName();
      }
    },
    // 等级初始化
    gradeInit(me_score) {
      return grade(me_score);
    },
    // 查看评分的详情
    scoreDetile(item) {
      this.$openPage("/score/selfEvaluationDetails", {
        isMyApprove: true, //是否从我的审批中进入的
        ...item
      });
    },
    // 查看考核详情
    assessmentDetile(item) {
      this.$openPage("/assessment/detile", {
        isMyApprove: true, //是否从我的审批中进入的
        ...item
      });
    },
    async scoreApproval_listByName() {
      this.$store.state.loading = true;
      this.$store.state.loadingText = "获取数据中";
      const { data = [] } = await service.scoreApproval_listByName({
        start: 0,
        limit: 999999,
        // status: this.approve_statusSelect,
        userName: this.scoreApproval_userName,
        current: 1
      });
      this.$store.state.loading = false;
      console.log("评分板块", data);
      this.scoreApproval_listDoneData = data.rows || [];
    },
    // 评分板块
    // 分页查询待我审核的数据
    async scoreApproval_listDone() {
      this.scoreApproval_userName = "";
      this.$store.state.loading = true;
      this.$store.state.loadingText = "获取数据中";
      const { data = [] } = await service.scoreApproval_listDone({
        start: 0,
        limit: 999999,
        status: this.approve_statusSelect,
        userName: this.scoreApproval_userName,
        current: 1
      });
      this.$store.state.loading = false;
      console.log("评分板块", data);
      this.scoreApproval_listDoneData = data.rows || [];
      this.scoreApproval_listDoneDataSave = data.rows || [];
    },
    //截取名字最后一个
    subNameLast(name) {
      return name.substring(name.length - 2);
    }
  }
};
</script>

<style scoped>
.searchCom-top {
  top: 46px !important;
}
.page-top-nav {
  width: 100%;
  height: auto;
}
.van-dropdown-menu-box {
  position: fixed;
  left: 0px;
  top: 97px;
  width: 100%;
  height: auto;
  text-align: left;
  z-index: 100;
}
.item {
  width: 100%;
  height: auto;
  min-height: 100px;
  padding: 10px 16px;
  background: #fff;
  margin-top: 10px;
  padding-left: 80px;
  text-align: left;
  position: relative;
}
.item-state {
  position: absolute;
  right: 16px;
  top: 8px;
}
.item-logo-box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 80px;
  height: 100%;
  padding-top: 10px;
  /* padding-left: 10px; */
  background: #fff;
}
.item-logo {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background-color: #1989fa;
}
.item-logo > img {
  width: 100%;
  height: auto;
}
.item-con-box {
  width: 100%;
  height: auto;
}
.item-con-user-name {
  color: #000;
}
</style>
